import { Button, ButtonVariants } from '@/shared/ui';
import cn from 'classnames';

import cs from './References.module.scss';

const fixHref = (href: string) => {
  if (href.includes('https://')) {
    return href;
  }
  return `https://${href}`;
};

export const References = ({
  sources,
  className,
}: {
  className?: string;
  sources: { id: number; title: string; href: string }[];
}) => (
  <ol className={cn(cs.list, className)}>
    {sources.map(({ id, title, href }) => (
      <li key={id}>
        <Button
          className={cs.link}
          data-testid={`link-reference-${id}`}
          href={fixHref(href)}
          id={id.toString()}
          link
          target="_blank"
          variant={ButtonVariants.LinkGray}
        >
          <span className={cs.id}>{id}.</span>
          <span className={cs.title}>{title}</span>
        </Button>
      </li>
    ))}
  </ol>
);
